<template>
	<div class="web-content">
		<div class="img-404"></div>
		<p class="notfound-p">哎呀迷路了...</p>
		<div class="notfound-reason">
			<p>可能原因:</p>
			<ul>
				<li>原来的页面不存在了</li>
				<li>我们的服务器被外星人劫持了</li>
			</ul>
		</div>
		<div class="notfound-btn-container">
			<router-link class="notfound-btn" to="#/">首页</router-link>
		</div>
	</div>
</template>
<style scoped="scoped">
	.img-404{
		height: 155px;
		background: url(../assets/images/img-404.png) center center no-repeat;
		-webkit-background-size: 150px auto;
		margin-top: 40px;
		margin-bottom: 20px;
	}
	.notfound-p{
		line-height: 22px;
		font-size: 17px;
		padding-bottom: 15px;
		border-bottom: 1px solid #f6f6f6;
		text-align: center;
		color: #262b31;
	}
	.notfound-reason {
		color: #9ca4ac;
		font-size: 13px;
		line-height: 13px;
		text-align: left;
		width: 210px;
		margin: 0 auto;
	}
	.notfound-reason p {
		margin-top: 13px;
	}
	.notfound-reason ul li {
		margin-top: 10px;
		margin-left: 36px;
	}
	.notfound-btn-container {
		margin: 40px 0;
		text-align: center;
		
	}
	.notfound-btn-container .notfound-btn {
		display: inline-block;
		border: 1px solid #ebedef;
		background-color: #239bf0;
		color: #fff;
		font-size: 15px;
		border-radius: 5px;
		text-align: center;
		padding: 10px 30px;
		line-height: 16px;
		white-space: nowrap;
		
	}
	.notfound-btn:hover{
		text-decoration: none;
	}
</style>